<template>
    <div>
        <!-- 头部面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/wlecome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/rights'}">权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片区域 -->
        <el-card class="roles_card">
            <!-- 添加角色按钮 -->
            <el-button @click="add_role_onfun" type="primary">添加角色</el-button>

            <!-- 角色列表 -->
            <el-table :data="roles_lists" stripe border fit style="width: 100%; margin-top: 20px">
                <!-- 展开列 -->
                <el-table-column type="expand">
                    <template slot-scope="scope">
                        <!-- 一个一级权限是一行 -->
                        <el-row type="flex" align="middle" :class="['el_row_bottom', index == 0? 'el_row_top' : '']" :key="big_itme.id" v-for="(big_itme, index) in scope.row.children">
                            <!-- 一级在左边 右边是此一级对应的二级和三级 -->
                            <el-col :span="5">
                                <el-tag type="success">{{big_itme.authName}}</el-tag>
                                <i class="el-icon-caret-right"></i>
                            </el-col>
                            <!-- 第二列 -->
                            <el-col :span="19">
                                <el-row class="el_row_bottom" :key="mid_itme.id" v-for="(mid_itme) in big_itme.children">
                                    <el-col :span="5">
                                        <el-tag type="info">{{mid_itme.authName}}</el-tag>
                                        <i class="el-icon-caret-right"></i>
                                    </el-col>
                                    <el-col :span="19">
                                        <el-tag closable @close="del_right_tag_onfun(scope.row, sim_itme.id)" :key="sim_itme.id" v-for="(sim_itme) in mid_itme.children">{{sim_itme.authName}}</el-tag>
                                    </el-col>
                                </el-row> 
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
                <!-- 索引列 -->
                <el-table-column type="index" label="#">
                </el-table-column>
                <el-table-column
                prop="roleName"
                label="角色名称">
                </el-table-column>
                <el-table-column
                prop="roleDesc"
                label="角色描述">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit">编辑</el-button>
                        <el-button type="danger" icon="el-icon-delete">删除</el-button>
                        <el-button @click="show_set_rightbox_onfun_and_getdata(scope.row)" type="info" icon="el-icon-setting">分配权限</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 分配权限的弹出框 -->
        <el-dialog
            @close="close_set_rightbox_onfun"
            title="分配权限"
            :visible.sync="is_show_set_right_box"
            width="50%">
            <!-- 这是主体部分 -->
            <el-tree ref="set_rights_tree" show-checkbox node-key="id" 
                     default-expand-all 
                     :data="all_rights_lists" 
                     :props="my_tree_options"
                     :default-checked-keys="def_keys_data"></el-tree>
            <!-- 主体结束 -->

            <span slot="footer" class="dialog-footer">
                <el-button @click="is_show_set_right_box = false">取 消</el-button>
                <el-button type="primary" @click="suer_set_right_onfun">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                roles_lists:[],
                is_show_set_right_box:false,
                all_rights_lists: [],
                my_tree_options: {
                    label:'authName',
                    children: 'children'
                },
                def_keys_data: [],
                role_id:''      
            }
        },
        methods: {
            // 获取角色列表数据函数
            async get_roles_lists_fun() {
                const {data: res_data} = await this.$axios.get('roles');
                if(res_data.meta.status != 200) return this.$Message.error('获取角色列表失败!'); 
                this.roles_lists = res_data.data;
                return this.$Message.success('获取角色列表成功'); 
            },
            // 添加角色按钮函数
            add_role_onfun() {
                console.log(1);
            },
            // 获取该用户已有的权限并存到默认权限数组(递归)
            get_a_user_rights(role_data) {
                if(!role_data.children){
                    this.def_keys_data.push(role_data.id);
                }
                // this.get_a_user_rights(role_data.children, def_keys_data);
                for (var itme in role_data.children) {
                    this.get_a_user_rights(role_data.children[itme]);
                }
            },
            // 删除用户的权限
            async del_right_tag_onfun(role, right_id) {
                const {data: res_data} = await this.$axios.delete(`roles/${role.id}/rights/${right_id}`);
                if(res_data.meta.status !== 200) return this.$Message.error('删除用户权限失败!'); 
                role.children = res_data.data;
                return this.$Message.success('删除用户权限成功'); 
            },
            // 点击分配权限显示分配权限对话框 并获取全部权限
            async show_set_rightbox_onfun_and_getdata(role_data) {
                // 保存角色id
                this.role_id = role_data.id;
                this.is_show_set_right_box = true;
                // 获取权限数据
                const {data: res_data} = await this.$axios.get(`rights/tree`);
                if(res_data.meta.status !== 200) return this.$Message.error('获取权限列表失败!');
                this.all_rights_lists = res_data.data;
                // 调用函数获取此角色的已有权限
                this.get_a_user_rights(role_data);
                return this.$Message.success('获取权限列表成功');
            },
            // 点击确定分配权限按钮发请求配置
            async suer_set_right_onfun() {
                var arry_1 = this.$refs.set_rights_tree.getCheckedKeys();
                var arry_2 = this.$refs.set_rights_tree.getHalfCheckedKeys();
                var req_arry = [...arry_1, ...arry_2];
                var req_str = req_arry.join(',');
                this.is_show_set_right_box = false;
                // 发送授权请求
                const {data: res_data} = await this.$axios.post(`roles/${this.role_id}/rights`, {
                    rids:req_str
                });
                if(res_data.meta.status != 200) return this.$Message.error('授权失败!');
                // 重新获取角色数据（权限的展示也是依赖角色数据的children属性for出来的）
                this.get_roles_lists_fun();
                return this.$Message.success('授权成功');
            },
            // 分配框被关闭触发
            close_set_rightbox_onfun() {
                // 初始化已有权限数组
                this.def_keys_data = [];
            }
        },
        mounted() {
            // 获取角色列表数据
            this.get_roles_lists_fun();
        }
    }
</script>

<style>
    .roles_card {
        margin-top: 20px;
    }
    .el-tag {
        margin: 10px;
    }
    .el_row_bottom {
        border-bottom: 1px solid #ebeef5;
    }
    .el_row_top {
        border-top: 1px solid #ebeef5;
    }
</style>